<template>
  <div class="ckedit">
    <div class="ck-container">
      <ckeditor
        :editor="editor"
        :disabled="read_only === true"
        v-model="content"
        @ready="onReady"
        @input="$emit('editor-input', content)"
        @focus="onFocus"
        @blur="onBlur"
        :config="editorConfig"
      ></ckeditor>
    </div>
  </div>
</template>

<script>
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
export default {
  name: "DocEditor",
  model: {
    prop: "content",
    event: "editor-input",
  },
  props: {
    read_only: {
      type: Boolean,
      default: false,
    },
    content: { type: String },
  },
  data() {
    return {
      editor: DecoupledEditor,
      editor_content: "",
      editorConfig: {
        language: "en",
        fontSize: {
          options: [8, 10, "default", 14, 16, 18, 20, 22, 24, 26, 28, 32, 46],
        },
        fontFamily: {
          options: [
            "宋体",
            "仿宋",
            "微软雅黑",
            "黑体",
            "仿宋_GB2312",
            "楷体",
            "隶书",
            "幼圆",
          ],
        },
      },
    };
  },
  methods: {
    onFocus() {
      //  console.log(this.content);
      this.editor.ui.getEditableElement().classList.add("ck-container-area");
    },
    onBlur() {
      this.editor.ui.getEditableElement().classList.add("ck-container-area");
    },
    onReady(editor) {
      // let self = this;
      //  console.log(this.content);
      //  console.log(editor.ui.getEditableElement().parentElement);
      if (this.read_only === false) {
        editor.ui
          .getEditableElement()
          .parentElement.parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement().parentElement
          );
      } else {
        // editor.ui.view.toolbar.element.destroy();
      }
      editor.ui.getEditableElement().classList.add("ck-container-area");
      editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
        return {
          upload: async () => {
            return await loader.file.then(
              (file) =>
                new Promise((resolve, reject) => {
                  //图片接口
                  this.$fileService.uploadFile(
                    file,
                    (result) => {
                      if (result.success) resolve({ default: result.url });
                      else reject("图片上传错误: " + result.exc);
                    },
                    (progressData) => {
                      loader.upload = progressData.percent;
                      loader.uploadTotal = 1;
                    }
                  );
                })
            );
          },
        };
      };
      this.editor = editor;
    },
  },
};
</script>

<style scoped>
.ckedit {
  /* min-height: 10vh; */
  /* max-height: 82vh; */
  display: flex;
  flex-flow: column nowrap;
}
.ck.ck-toolbar {
  /* flex:1; */
  z-index: 2;
  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2);
  border-bottom: 1px solid var(#c4c4c4);
  border-radius: var(--ck-border-radius);
  border: 0;
  background: var(--ck-color-toolbar-background);
  padding: 0 var(--ck-spacing-small);
  user-select: none;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  /*color: #c3c3c3 !important;*/
}
.ck-container {
  font-family:"黑体";
  /* padding: calc(2 * var(--ck-spacing-large)); */
  background: var(--ck-color-base-foreground);
  /* min-height: fit-content(20em); */
  /* max-height: 100%;
   */
  /*background-color: #2f2f2f;*/
  overflow-y: hidden;
}
/deep/ p{
    font-family:"黑体";
    font-size:22px;
}
/deep/ h2{
      font-family:"黑体";
      font-weight: bold;
    font-size:26px;
}
/* .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
  /* width: 100%;
  height: 100%;
  max-height: 900px;
  padding: 1cm 2cm 2cm;
  border: 1px hsl(0, 0%, 82.7%) solid;
  border-radius: var(--ck-border-radius);
  background: white;
  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
  margin-top: 0px; 
  font-family: "黑体";
} */
/* .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused {
  width: 100%;
  height: 100%;
  
  max-height: 900px;
  padding: 1cm 2cm 2cm;
  border: 1px hsl(0, 0%, 20.7%) solid;
  border-radius: var(--ck-border-radius);
  background: white;
  box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.1);
  margin-top: 0px;
} */

/* p{
  font-family: "黑体" !important;
} */
</style>
